<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <div>父组件</div>
    <div><button @click="handle">销毁</button></div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
</div>
<script>
    // 兄弟组件数据传递
    // 提供事件中心
    var hub=new Vue()

    Vue.component('test-tom',{
        data(){
            return{
                num:0
            }
        },
        template:`
        <div>
            <div>TOM:{{num}}</div>
            <div><button @click="handle(2)">点击+2</button></div>
        </div>
        `,
        methods:{
            handle(){
                hub.$emit('jerry-event',2)
            }
        },
        mounted(){
            hub.$on('tom-event',(val)=>{
                this.num+=val
            })
        }
    })
    Vue.component('test-jerry',{
        data(){
            return{
                num:0
            }
        },
        template:`
        <div>
            <div>Jerry:{{num}}</div>
            <div><button @click="handle(1)">点击+1</button></div>
        </div>
        `,
        methods:{
            handle(){
                hub.$emit('tom-event',1)
            }
        },
        mounted() {
            hub.$on('jerry-event',(val)=>{
                this.num+=val
            })
        }
    })
    var vm=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            handle(){
                hub.$off('jerry-event')
                hub.$off('tom-event')
            }
        }
    })
</script>
</body>
</html>
